{% block sw_product_seo_form %}
<div class="sw-product-seo-form">
    {% block sw_product_seo_form_meta_title %}
    <sw-inherit-wrapper
        v-model:value="product.metaTitle"
        :has-parent="hasParent"
        :label="$tc('sw-product.seoForm.labelMetaTitle')"
        :help-text="$tc('sw-product.seoForm.helpTextMetaTitle')"
        :inherited-value="parentProduct.metaTitle"
    >
        <template #content="props">

            <mt-text-field
                :placeholder="$tc('sw-product.seoForm.placeholderMetaTitle')"
                :error="productMetaTitleError"
                :disabled="props.isInherited || !allowEdit"
                :model-value="props.currentValue"
                @update:model-value="props.updateCurrentValue"
            />
        </template>
    </sw-inherit-wrapper>
    {% endblock %}

    {% block sw_product_seo_form_meta_description %}
    <sw-inherit-wrapper
        v-model:value="product.metaDescription"
        :has-parent="hasParent"
        :label="$tc('sw-product.seoForm.labelMetaDescription')"
        :help-text="$tc('sw-product.seoForm.helpTextMetaDescription')"
        :inherited-value="parentProduct.metaDescription"
    >
        <template #content="props">
            <mt-textarea
                :placeholder="$tc('sw-product.seoForm.placeholderMetaDescription')"
                :error="productMetaDescriptionError"
                :disabled="props.isInherited || !allowEdit"
                :model-value="props.currentValue"
                @update:model-value="props.updateCurrentValue"
            />
        </template>
    </sw-inherit-wrapper>
    {% endblock %}

    {% block sw_product_seo_form_keywords %}
    <sw-inherit-wrapper
        v-model:value="product.keywords"
        :has-parent="hasParent"
        :label="$tc('sw-product.seoForm.labelKeywords')"
        :help-text="$tc('sw-product.seoForm.helpTextKeywords')"
        :inherited-value="parentProduct.keywords"
    >
        <template #content="props">

            <mt-text-field
                :placeholder="$tc('sw-product.seoForm.placeholderKeywords')"
                :error="productKeywordsError"
                :disabled="props.isInherited || !allowEdit"
                :model-value="props.currentValue"
                @update:model-value="props.updateCurrentValue"
            />
        </template>
    </sw-inherit-wrapper>
    {% endblock %}

    {% block sw_product_seo_form_canonical_url %}
    <template v-if="!hasParent && hasVariants">

        {% block sw_product_seo_form_canonical_url_switch %}

        <mt-switch
            v-model="canonicalProductSwitchEnabled"
            :label="$tc('sw-product.seoForm.labelCanonicalUrlMode')"
        />
        {% endblock %}

        {% block sw_product_seo_form_canonical_url_select %}
        <sw-single-select
            ref="canonicalProductSelect"
            v-model:value="product.canonicalProductId"
            :options="variants"
            :disabled="!canonicalProductSwitchEnabled"
            value-property="id"
            :label="$tc('sw-product.seoForm.labelCanonicalProduct')"
            :placeholder="$tc('sw-product.seoForm.placeholderCanonicalProduct')"
            show-clearable-button
            @search="onSearch"
        >

            <template #selection-label-property="{ item }">
                {% block sw_product_seo_form_canonical_url_select_selection %}
                <sw-product-variant-info
                    :variations="item.variation"
                    :show-tooltip="false"
                >
                    {{ getItemName(item) }}
                </sw-product-variant-info>
                {% endblock %}
            </template>

            <template #result-label-property="{ item }">
                {% block sw_product_seo_form_canonical_url_select_result %}
                <sw-product-variant-info
                    :variations="item.variation"
                    :show-tooltip="false"
                >
                    {{ getItemName(item) }}
                </sw-product-variant-info>
                {% endblock %}
            </template>
        </sw-single-select>
        {% endblock %}
    </template>
    {% endblock %}
</div>
{% endblock %}
